<template>
  <qx-table :option="tableOption" :remoteData="remoteData">
    <template v-slot:top>
      <qx-form v-model="searchForm" :option="tableOption" isSearch @submit="startSearch"></qx-form>
    </template>
    <template v-slot:menuLeft>
      <q-btn outline text-color="primary" @click="handleSync('headoffice', $t('Misc.SynchronousHeadquarters'))">
        {{ $t('Misc.SynchronousHeadquarters') }}
      </q-btn>
      <q-btn outline text-color="primary" @click="handleSync('rcs', $t('Misc.SynchronizeRCSData'))">
        {{ $t('Misc.SynchronizeRCSData') }}
      </q-btn>
    </template>
    <template v-slot:Image="{ row }">
      <div class="full-width row justify-center">
        <AMRIMG :amrType="row.deviceType" :imageUrl="row.imageUrl"
                classes="col-7 cursor-pointer cursor-hover-image rounded-borders"
                @click="handleModelInfo(row)"></AMRIMG>
        <div class="row full-width text-dark text-weight-medium text-body1">
          <div>{{ row.deviceName }}</div>
          <q-space></q-space>
          <div>{{ row.deviceLength || 0 }}x{{ row.deviceWidth || 0 }}x{{ row.deviceHeight || 0 }}mm</div>
        </div>
      </div>
    </template>
    <template v-slot:menu="{ row }">
      <q-btn class="col" color="primary" icon="delete" outline unelevated @click="handleDelete(row)">
        {{ $t('Del') }}
      </q-btn>
    </template>
  </qx-table>
  <q-modal v-model="syncModelVisible" :header="header" width="400" @beforeClose="beforeClose" @confirm="submitSync">
    <qx-form ref="FormRef" v-model="formInfo" :option="tableOption" class="q-pr-md"></qx-form>
  </q-modal>
  <AGVModelInfo v-model="modalVisible" :rowInfo="formInfo"></AGVModelInfo>
</template>
<script setup>
import { i18n, toI18nName } from 'boot/i18n.js'
import { deleteAPI, postAPI } from 'src/api/index.js'
import { getRemoteData, setRemoteData } from 'src/enum/ajaxRemoteData.js'
import { AGVTypes, enableOrDisable, yesOrNo } from 'src/enum/index.js'
import AGVModelInfo from 'src/views/AGVCore/AGVModelInfo.vue'
import AMRIMG from 'src/views/AGVCore/AMRIMG.vue'
import { computed, onMounted, ref } from 'vue'
import { createDialog } from 'src/utils/utils.js'

const header = ref('')
const formInfo = ref({})
const FormRef = ref(null)
const AGVBrands = ref([])
const searchForm = ref({})
const modalVisible = ref(false)
const syncModelVisible = ref(false)
const remoteData = ref({ dicUrl: '/yfagv/api/agvTypeDevice/list' })
getRemoteData('agv_brand', '/yfagv/api/agvCfgBrand/list').then(data => (AGVBrands.value = data))
const tableOption = computed(() => {
  return {
    grid: true, searchSpan: 5, export: true,
    column: [{
      label: `${i18n.t('AGVCore.AGVBrand')}`, field: 'agvBrandCode', type: 'select', options: AGVBrands.value,
      minWidth: 100, props: { label: `${toI18nName('agvBrandNameZhCn')}`, value: 'agvBrandCode' },
      required: formInfo.value.source === 'rcs', topLeft: true
    }, {
      label: `${i18n.t('AGVCore.AGVType')}`, field: 'deviceType', type: 'select', options: AGVTypes.value,
      minWidth: 100, hide: true
    }, {
      label: `${i18n.t('AGVCore.AGVModel')}`, field: 'deviceName', hide: true, search: false, display: false
    }, {
      label: '', field: 'Image', slot: true, export: false, minWidth: 100, search: false, nonHeader: true,
      display: false, showInfo: false
    }, {
      label: `${i18n.t('AGVCore.ModelSpec')}`, field: 'deviceLength', unit: 'mm', hide: true, search: false,
      display: false, format: (_, row) => {
        const spec = `${row.deviceLength || 0}x${row.deviceWidth || 0}x${row.deviceHeight || 0}mm`
        if (['10', '20', '40'].includes(row.deviceType)) return `${spec} R:${row.deviceRotaDia || 0}mm`
        return spec
      }
    }, {
      label: `${i18n.t('IsEnable')}`, field: 'isEnable', type: 'select', options: enableOrDisable.value,
      topRight: true, useTag: true, display: false, search: false, minWidth: 80
    }, {
      label: `${i18n.t('AGVCore.IsOmni')}`, field: 'deviceDirType', options: yesOrNo.value, useTag: true,
      hide: true, search: false, display: false
    }]
  }
})

const handleModelInfo = row => {
  formInfo.value = row
  modalVisible.value = true
}
const handleSync = (source, title) => {
  header.value = title
  formInfo.value = { source }
  const msg = source === 'rcs' ? `${i18n.t('Misc.SyncTip1')}` : `${i18n.t('Misc.SyncTip3')}`
  createDialog({ msg }, () => {
    syncModelVisible.value = true
  }, () => {})
}
const handleDelete = row => {
  createDialog({ msg: `${i18n.t('DelTips')}` }, () => {
    deleteAPI(`/yfagv/api/agvTypeDevice/${row.id}`, {}, () => startSearch('clear'))
  }, () => {})
}
const formatSearchForm = () => ({ ...searchForm.value })
const startSearch = (action, done) => {
  remoteData.value.params = formatSearchForm()
  remoteData.value.clearSelected = true
  if (done) done()
  action === 'clear' && setRemoteData('agv_model')
}
const beforeClose = () => {
  if (FormRef.value) FormRef.value.onReset()
  syncModelVisible.value = false
}
const submitSync = mDone => {
  FormRef.value.validate((form, done) => {
    const uri = form.source === 'rcs' ? '/yfagv/api/syncRcsToFactoryApi/syncAgvDeviceType'
      : '/yfagv/api/syncAgvCfg/syncHeadOfficeData'
    postAPI(uri, form, () => {
      startSearch(form.source === 'rcs' ? 'clear' : '')
      done()
      mDone && mDone()
    }, () => {
      done()
      mDone && mDone(false)
    })
  }, () => mDone && mDone(false))
}

onMounted(startSearch)
</script>